<template>
    <div class="common-layout">
        <el-container>
            <el-header height="150px"></el-header>
            <el-container>
                <!-- 左侧 -->
                <el-aside width="200px">
                    <div class="box">
                        <ul>
                            <li draggable="true"><img class="img" src="@/img/img1.png" alt="">拖拽内容</li>
                            <li draggable="true"><img class="img" src="@/img/img2.png" alt=""></li>
                        </ul>
                    </div>
                </el-aside>
                <!-- 中间 -->
                <el-main>
                    <div class="content">
                        <ul>
                            <li>
                                我是放下的位置
                            </li>
                        </ul>
                    </div>
                </el-main>
                <!-- 右侧 -->
                <el-aside width="200px">right</el-aside>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue';

</script>

<style scoped lang='scss'>
.el-header {
    background-color: aqua;


}

.el-aside {
    height: 500px;
    margin-top: 30px;
    border-right: 3px solid greenyellow;
    border-left: 3px solid greenyellow;

    .img {
        width: 70px;
        height: 70px;
        border-radius: 10px;
        margin-left: 10px;
    }
}
</style>
